<!--
 * @Description: 生长阶段划分
-->
<template>
  <BaseMainSlot>
    <template v-slot:btn-box>
      <div class="darg-bar">
        <!-- 拖拽位置调整 -->
        <!-- <div v-if="nowstau" class="darg-but">
          <div class="but-item" @click="alloweddrag = !alloweddrag">
            <img v-if="!alloweddrag" src="~@/assets/action-bar-icon/edit-active.png"/>
            <img v-if="alloweddrag" src="~@/assets/action-bar-icon/save-active.png"/>
          </div>
        </div> -->
        <ActionBar
          :page-no="39"
          :add-active="addActive"
          :del-active="delActive"
          :edit-active="editActive"
          :cancel-active="cancelActive"
          :save-active="saveActive"
          :has-edit="false"
          :has-save="false"
          :has-cancel="false"
          :has-import="true"
          :has-sort="true"
          @add="add"
          @cancel="cancel"
          @edit="edit"
          @del="del"
          @save="save"
          @import="importPublicStage"
          @sortData="sortData"
        />
      </div>
    </template>
    <template v-slot:search-box>
      <SearchForm
        :formConfig="formConfig"
        :formData="searchlist"
        @search="getTableDataList"
        @getPlantVarietyList="getPlantVarietyList"
      ></SearchForm>
    </template>
    <template v-slot:table-box>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        height="calc(100% - 50px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="growthPhaseName" label="阶段名称" />
        <el-table-column prop="cycle" label="生长持续天数">
          <template v-if="scope.row.growthPhaseNo" slot-scope="scope">
            <span>{{ scope.row.cycle ? scope.row.cycle + "天" : "—" }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" label="操作">
          <template v-if="scope.row.growthPhaseNo" slot-scope="scope">
            <el-button
              v-if="judgePermission(39, 'edit')"
              class="text-btn-cursor"
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
              ><i class="el-icon-edit-outline"></i> 修改</el-button
            >
            <el-button
              v-if="judgePermission(39, 'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row)"
              ><i class="el-icon-delete"></i> 删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
      <!-- <div v-if="nowstau" class="typetwo-main">
        <transition-group tag="div" name="drag" class="box">
          <div
            v-for="(item, index) in list"
            :key="item.growthPhaseNo"
            class="drag-item"
            :draggable="true"
            @dragstart="dragStart($event, index)"
            @dragover="allowDrop"
            @drop="drop($event, index, list)"
          >
            <div class="drag-name">{{ item.growthPhaseName }}</div>
            <img
              :src="'data:image/png;base64,' + item.pictureData"
              :width="setsortimgwidth(index)"
              :height="setsortimgheight(index)"
            />
          </div>
        </transition-group>
      </div> -->
    </template>
    <template v-slot:dialog>
      <el-dialog
        :title="'导入生长阶段信息'"
        :visible.sync="dialogFormImportVisible"
        :before-close="cancel"
        width="40%"
      >
        <el-form
          ref="formData"
          label-position="left"
          :model="formDataImport"
          :rules="rules"
          class="el-form"
          :show-message="canInput"
        >
          <el-form-item label="种养类别:" prop="publicNo">
            <el-cascader
              v-model="formDataImport.plantVarietyNoList"
              :placeholder="plantTypeName"
              :options="planttypeList"
              :props="{
                expandTrigger: 'hover',
                value: 'plantTypeNo',
                children: 'child',
                label: 'plantTypeName',
                checkStrictly: true
              }"
              @change="getPlantVarietyList"
            />
            <el-form-item label="种养品种:" prop="publicNo">
              <el-select
                v-model="formDataImport.plantVarietyNo"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in plantVarietyList"
                  :key="index"
                  :label="item.plantVarietyName"
                  :value="item.plantVarietyNo"
                />
              </el-select>
            </el-form-item> </el-form-item
        ></el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancelImport('formData')">
            取 消
          </el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="saveImport('formData')"
          >
            保 存
          </el-button>
        </div>
      </el-dialog>

      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogFormVisible"
        :before-close="cancel"
        width="40%"
      >
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
          :show-message="canInput"
        >
          <el-form-item label="阶段名称:" prop="growthPhaseName" class="w50p">
            <el-input
              v-model="formData.growthPhaseName"
              clearable
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="种养类别:" prop="selectplantlist" class="w50p">
            <el-cascader
              v-model="formData.selectplantlist"
              :placeholder="plantTypeName"
              :options="planttypeList"
              clearable
              :props="{
                expandTrigger: 'hover',
                value: 'plantTypeNo',
                children: 'child',
                label: 'plantTypeName',
                checkStrictly: true
              }"
              @change="getFormPlantVarietyList"
            />
          </el-form-item>
          <el-form-item label="种养品种:" prop="plantVarietyNo" class="w50p">
            <el-select
              v-model="formData.plantVarietyNo"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="(item, index) in formPlantVarietyList"
                :key="index"
                :label="item.plantVarietyName"
                :value="item.plantVarietyNo"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="生长持续天数:" prop="cycle" class="w50p">
            <el-input v-model.number="formData.cycle" clearable />
          </el-form-item>
          <el-form-item label="上传图片:" prop="picmes">
            <ele-upload-image
              v-model="image"
              :response-fn="handleResponse"
              :before-remove="handleRemove"
              :headers="headers"
              :data="uploadData"
              :file-size="10"
              :action="ImageUrl()"
            />
          </el-form-item>
          <!-- <el-form-item label="生长图片:">
            <img
              v-if="imageurl.length > 0"
              :src="'data:image/png;base64,' + imageurl"
              style="width: 200px; height: 110px"
            />
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel()">
            取 消
          </el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save('formData')"
          >
            保 存
          </el-button>
        </div>
      </el-dialog>

      <el-dialog
        :title="'生长阶段信息管理'"
        :visible.sync="dialogFormSortVisible"
        :before-close="
          () => {
            dialogFormSortVisible = false;
          }
        "
        width="40%"
      >
        <transition-group tag="div" name="drag" class="box">
          <div
            v-for="(item, index) in list"
            :key="item.growthPhaseNo"
            class="drag-item"
            :draggable="true"
            @dragstart="dragStart($event, index)"
            @dragover="allowDrop"
            @drop="drop($event, index, list)"
          >
            <div class="drag-name">{{ item.growthPhaseName }}</div>
            <img
              :src="'data:image/png;base64,' + item.pictureData"
              :width="setsortimgwidth(index)"
              :height="setsortimgheight(index)"
            />
          </div>
        </transition-group>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancelSort('formData')">
            取 消
          </el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="saveSort('formData')"
          >
            保 存
          </el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import SearchForm from "@/components/searchForm";
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/digital-production/growth-record-management/growth-stage-division/index";
import zhongyangleibie from "@/api/basic-info-manage/category-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
// import SelectButton from "@/components/selectbutton/index.vue";
// import uploadimage from "@/components/uploadimage/uploadimage.vue";
// import BaseMainSlot from "@/components/BaseMainSlot/shangxia.vue"
import { mymixin } from "@/utils/mixin";
import baseURL from "@/api/baseURL";
import { mapGetters } from "vuex";
// import { getToken } from '@/utils/auth';
export default {
  name: "GrowthStageDivision",
  components: {
    SearchForm,
    Pagination,
    BaseMainSlot,
    // SelectButton,
    ActionBar
    // uploadimage,
  },
  mixins: [mymixin],
  data() {
    var checktype = (rule, value, callback) => {
      if (this.selectplantlist === null || this.selectplantlist.length === 0) {
        callback(new Error("请选择种养类别"));
      } else {
        callback();
      }
    };
    var checkpic = (rule, value, callback) => {
      if (this.imageurl === null || this.imageurl.length === 0) {
        callback(new Error("请选择图片"));
      } else {
        callback();
      }
    };
    return {
      formConfig: [
        {
          label: "种养类别",
          prop: "selectplantlist",
          type: "cascader",
          change: "getPlantVarietyList",
          options: [], // planttypeList
          optionKey: {
            expandTrigger: "hover",
            value: "plantTypeNo",
            children: "child",
            label: "plantTypeName",
            checkStrictly: true
          }
        },
        {
          label: "种养品种",
          prop: "plantVarietyNo",
          type: "select",
          options: [], // plantVarietyList
          optionKey: { label: "plantVarietyName", value: "plantVarietyNo" }
        }
      ],
      rules: {
        growthPhaseName: [
          { required: true, message: "请选择入阶段名称", trigger: "blur" }
        ],
        cycle: [
          { required: true, message: "请输入天数", trigger: "blur" },
          { type: "number", message: "请输入数字" }
        ],
        selectplantlist: [
          { required: true, validator: checktype, trigger: "change" }
        ],
        picmes: [{ required: true, validator: checkpic }]
      },
      // 是否允许拖动
      alloweddrag: false,
      list: [],
      buttonselectlist: [{ name: "添加生长阶段" }, { name: "生长阶段划分" }],
      // 种养类别名称
      plantTypeName: "种养类别选择",
      // 所搜索框内容
      searchlist: {},
      // 图片base64位
      imageurl: "",
      imagename: "",
      // searchName: "",
      // 当前生产批次完成状态
      nowstau: false,
      // 种养类别
      planttypeList: [],
      selectplantlist: [],
      // 当前表格选择的数组
      nowSelectList: [],
      dialogTitle: null,
      dialogFormVisible: false,
      dialogFormImportVisible: false,
      publicGrowthPhase: [], // 公共生长阶段列表
      formDataImport: {},
      plantVarietyNo: null,
      plantVarietyList: [],

      formPlantVarietyList: [],
      dialogFormSortVisible: false, // 排序
      // 图片上传
      basicUrl: `${baseURL.webServiceUrl}/v3/templateTenant/phasePicture/add`,
      pictureNo: null
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    }),
    headers() {
      return {
        accessToken: sessionStorage.getItem("token"),
        organizationNo: sessionStorage.organizationNo,
        sysDataBaseName: sessionStorage.databaseName,
        dataBaseName: sessionStorage.databaseName
      };
    },
    uploadData() {
      return {
        organizationNo: sessionStorage.organizationNo
      };
    }
  },
  // watch: {
  //   alloweddrag(newvalue) {
  //     if (newvalue === false) {
  //       this.$confirm("确认保存？")
  //         .then((_) => {
  //           this.savesort();
  //         })
  //         .catch((_) => {});
  //     }
  //   }
  // },
  created() {
    //this.getTableDataList();
    this.getPublicGrowthPhaseList();
  },
  mounted() {
    this.getselectdatalist();
    this.getPlantVarietyList();
    // this.getFormPlantVarietyList()
  },
  methods: {
    handleResponse(response, file, fileList) {
      if (this.nowChanceStau === "edit" || this.nowChanceStau === "add") {
        // this.pictureNo = response.data;
        // nowpagereq.getimage(this.pictureNo).then(res => {
        this.image = "data:image/png;base64," + response.data.pictureData;
        this.pictureNo = response.data.phasePictureNo;
        // });
        return this.image;
      } else {
        return this.$message.error("点击修改按钮再进行编辑!");
      }
    },
    handleRemove() {
      if (this.nowChanceStau === "edit" || this.nowChanceStau === "add") {
        // console.log(response);
        nowpagereq.delPictureByNo(this.pictureNo).then(res => {
          if (res.code === 1) {
            delete this.pictureNo;
            delete this.formData.pictureNo;
            // console.log(this.formData)
            this.$message.success(res.msg);
          }
        });
      } else {
        return this.$message.error("点击修改按钮再进行编辑!");
      }
    },
    ImageUrl() {
      if (this.nowChanceStau === "edit" || this.nowChanceStau === "add") {
        let URL = `${baseURL.webServiceUrl}v3/templateTenant/phasePicture/add`;
        return URL;
      } else {
        let URL = "#";
        // console.log(URL)
        return URL;
      }
    },
    sortData() {
      if (!this.searchlist.plantVarietyNo) {
        this.$message.info("请选择种养品种");
        return;
      }
      this.getallphase();
      this.alloweddrag = true;
      this.dialogFormSortVisible = true;
    },
    cancelSort() {
      this.alloweddrag = false;
      this.dialogFormSortVisible = false;
    },
    async saveSort() {
      this.alloweddrag = false;
      this.list.forEach(async (item, index) => {
        item.sort = index;
        await nowpagereq.editlist(item);
      });
      this.dialogFormSortVisible = false;
      this.getTableDataList();
    },
    getPublicGrowthPhaseList() {
      nowpagereq.getPublicGrowthPhaseList().then(res => {
        if (res.code === 1) {
          this.publicGrowthPhase = res.data;
        }
      });
    },
    // 设置排序图片长宽
    setsortimgwidth(i) {
      let wid = 30 + (70 / this.list.length) * i;
      return wid + "px";
    },
    setsortimgheight(i) {
      let hei = 30 + (70 / this.list.length) * i;
      return hei + "%";
    },
    // 获取种养类别的生长阶段
    async getallphase() {
      this.list = [];
      if (!this.searchlist.plantVarietyNo) {
        this.$message.info("请选择种养品种");
        return;
      }
      let idmessage = {
        plantVarietyNo: this.searchlist.plantVarietyNo
      };
      let zhres = await nowpagereq.querybycondition(idmessage);
      let jklist = zhres.data;
      if (jklist && jklist.length > 0) {
        jklist.forEach(async (item, index) => {
          if (item.pictureNo) {
            let picdata = await nowpagereq.getimage(item.pictureNo);
            // eslint-disable-next-line require-atomic-updates
            item["pictureData"] = picdata.data?.pictureData;
            this.$set(this.list, index, item);
          }
        });
      } else {
        this.list = [];
        this.$message.warning("暂无数据！");
      }
    },
    // --- 拖动相关---
    // 取消默认行为
    allowDrop(e) {
      if (this.alloweddrag === true) {
        e.preventDefault();
      }
    },
    // 开始拖动
    dragStart(e, index) {
      e.dataTransfer.setData("index", index);
    },
    // 放置
    drop(e, index, data) {
      this.allowDrop(e);
      const dragIndex = e.dataTransfer.getData("index");
      const temp = data.splice(dragIndex, 1);
      data.splice(index, 0, temp[0]);
    },
    getimagename(e) {
      this.imagename = e;
    },
    getimageurl(e) {
      this.imageurl = e;
    },
    // 获取下拉框数据
    getselectdatalist() {
      // 获取种养类别树状表
      zhongyangleibie.getplantingTypeTree().then(res => {
        let list = res.data;
        this.planttypeList = this.filterTreeKey(list);
        this.formConfig[0].options = this.filterTreeKey(list);
        // 默认选择第一个种养类别的第一种品种
        if (this.planttypeList.length > 0) {
          let defaultPlantTypeNo = this.planttypeList[0].plantTypeNo;
          this.searchlist.selectplantlist = [defaultPlantTypeNo];
          this.getPlantVarietyList({ selectplantlist: [defaultPlantTypeNo] });
        }
      });
      nowpagereq.getPlantVariety({}).then(res => {
        if (res.code !== 1) {
          return;
        }
        this.formPlantVarietyList = res.data;
      });
      // 做不同的请求获取数据
    },
    getPlantVarietyList(e) {
      // 检查是否有选中的种养类别
      if (e.selectplantlist && e.selectplantlist.length > 0) {
        let params = {
          plantTypeNo: e.selectplantlist[0]
        };
        // 清空当前选中的种养品种
        this.searchlist.plantVarietyNo = "";
        nowpagereq.getPlantVariety(params).then(res => {
          if (res.code !== 1) {
            return;
          }
          this.plantVarietyList = res.data;
          this.formConfig[1].options = res.data;
          // 默认选择第一个种养品种，如果有
          if (this.plantVarietyList.length > 0) {
            let defaultPlantVarietyNo = this.plantVarietyList[0].plantVarietyNo;
            this.searchlist.plantVarietyNo = defaultPlantVarietyNo;

            this.getTableDataList();
          } else {
            this.tableData = [];
            this.addblankmet();
          }
        });
      } else {
        // 如果种养类别被清空，也清空种养品种的选择和列表
        this.plantVarietyList = [];
        this.searchlist.plantVarietyNo = null;
        this.formConfig[1].options = [];
      }
    },

    getFormPlantVarietyList(e) {
      this.$set(this.formData, "plantVarietyNo", "");
      if (e) {
        let params = {
          plantTypeNo: e[e.length - 1]
        };

        this.plantVarietyNo = "";
        nowpagereq.getPlantVariety(params).then(res => {
          if (res.code !== 1) {
            return;
          }
          this.formPlantVarietyList = res.data;
        });
      } else {
        nowpagereq.getPlantVariety({}).then(res => {
          if (res.code !== 1) {
            return;
          }
          this.formPlantVarietyList = res.data;
        });
      }
    },
    // 表格查询
    getTableDataList() {
      this.loading = true;
      this.tableData = [];
      let params = {
        page: this.currentPage || 1,
        size: this.pageSize || 10,
        entity: {
          plantVarietyNo: this.searchlist.plantVarietyNo
        }
      };

      // if (this.searchlist.length > 0) {
      //   this.querbylist();
      //   return;
      // }
      nowpagereq.getlist(params).then(res => {
        this.loading = false;
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error("查询失败");
        }
        this.loading = false;
        let data = res.data.content;
        // 赋值总条数
        this.totalSize = res.data.totalElements;
        // 赋值数组
        this.tableData = data;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    // 条件查询
    querbylist() {
      this.loading = true;
      this.tableData = [];
      let params = {
        growthPhaseName: this.searchlist.growthPhaseName
      };
      cpnsole.log(this.searchlist.growthPhaseName);
      nowpagereq.querybycondition(params).then(res => {
        this.loading = false;
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error("查询失败");
        }
        this.loading = false;
        let data = res.data.content;
        // 赋值总条数
        this.totalSize = res.data.totalElements;
        // 赋值数组
        this.tableData = data;
        this.addblankmet();
        this.resetActionBar();
      });
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    importPublicStage() {
      this.formDataImport = {};
      this.dialogFormImportVisible = true;
    },
    cancelImport() {
      this.formDataImport = {};
      this.dialogFormImportVisible = false;
    },
    saveImport() {
      let data = this.formDataImport;
      let addparams = {
        plantVarietyNo: data.plantVarietyNo,
        organizationNo: sessionStorage.organizationNo
      };
      nowpagereq.addlist(addparams).then(res => {
        if (res.code === 1) {
          this.$message.success("添加成功！");
          this.closeDialog();
          this.getTableDataList();
        } else {
          this.$message.error("添加失败！");
        }
      });
    },
    add() {
      this.formData = {};
      this.openDialog("add");
    },
    handleEdit(row) {
      this.formData = { ...row };
      this.openDialog("edit");
      this.selectplantlist = [];
      this.getpingzghongname(row.plantTypeNo);
      this.getimage(row.pictureNo);
      this.$set(
        this.formData,
        "selectplantlist",
        this.searchlist.selectplantlist
      );
    },
    cancel() {
      this.formData = {};
      this.closeDialog();
      this.image = "";
    },
    handleSelectionChange(list) {
      this.nowSelectList = [];
      let notvalue = true;
      this.nowSelectList = list.map(item => {
        if (item.growthPhaseNo) {
          return item.growthPhaseNo;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.nowSelectList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 删除时触发方法
    delmessage() {
      nowpagereq.dellist(this.nowSelectList).then(res => {
        if (res.code === 1) {
          this.$message.success("删除成功！");
          this.getTableDataList();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    handleDelete(data) {
      // nowpagereq.dellist([data.growthPhaseNo]).then(
      //   res => {
      //     if (res.code === 1) {
      //       this.$message.success("删除成功！");
      //       this.getTableDataList();
      //     } else {
      //       this.$message.error("删除失败！");
      //     }
      //   }
      // )
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          nowpagereq.dellist([data.growthPhaseNo]).then(res => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          //
          this.$message("取消删除");
        });
    },
    save() {
      // -----保存状态判断-----
      if (this.nowChanceStau === "edit") {
        this.formData.pictureNo = this.pictureNo;
        let editparams = {
          ...this.formData
          // growthPhaseName: this.formData.growthPhaseName,
          // growthPhaseNo: this.formData.growthPhaseNo,
          // cycle: this.formData.cycle,
          // plantTypeNo:
          //   this.selectplantlist[this.selectplantlist.length - 1] ||
          //   this.formData.plantTypeNo,
          // picture: {
          //   pictureData: this.imageurl,
          //   pictureName: this.imagename
          // }
        };
        nowpagereq.editlist(editparams).then(res => {
          if (res.code === 1) {
            this.$message.success("修改成功！");
            this.closeDialog();
            this.getTableDataList();
          } else {
            this.$message.error("修改失败！");
          }
        });
      } else if (this.nowChanceStau === "add") {
        // 新增接口
        // return
        // let data = this.publicGrowthPhase.find(el=>el.growthPhaseNo == this.formData.publicNo)
        // console.log(this.formData)
        this.formData.pictureNo = this.pictureNo;
        let addparams = {
          // ...data,
          ...this.formData,
          plantVarietyNo: this.formData.plantVarietyNo
        };
        nowpagereq.addGrowthPhase(addparams).then(res => {
          if (res.code === 1) {
            this.$message.success("添加成功！");
            this.closeDialog();
            this.getTableDataList();
          } else {
            this.$message.error("添加失败！");
          }
        });
      }
    },
    // 通过种养类别id查种养名称
    getpingzghongname(id) {
      let params = {
        plantTypeNo: id
      };
      zhongyangleibie.querybycondition(params).then(res => {
        this.plantTypeName = res.data[0].plantTypeName;
      });
    },
    // 条件查询获取详细信息
    getimage(id) {
      this.image = "";
      nowpagereq.getimage(id).then(res => {
        this.image = "data:image/png;base64," + res.data.pictureData;
      });
    },
    openDialog(type) {
      this.dialogFormVisible = true;
      this.dialogTitle =
        type === "add" ? "添加生长阶段信息" : "编辑生长阶段信息";
      this.nowChanceStau = type;
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.dialogTitle = null;
      this.nowChanceStau = "";
    },
    // 循环过滤树形数组
    filterTreeKey(arr) {
      let newArr = [];
      newArr = arr?.map(item => {
        if (item.children?.length > 0) {
          item = {
            ...item,
            child: this.filterTreeKey(item.children)
          };
        } else {
          delete item.child;
        }
        return item;
      });
      newArr = newArr?.filter(item => item != null);
      return newArr;
    }
  }
};
</script>

<style scoped lang="scss">
.darg-bar {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #00485a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  .darg-but {
    padding-left: 10px;
    background-color: #00485a;
    color: aqua;
    width: 80px;
    height: 50px;
    display: flex;
    // justify-content: center;
    align-items: center;
    .but-item {
      width: 64px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      white-space: nowrap;
      // border: 1px solid aqua;
      cursor: pointer;
      > img {
        width: 100%;
      }
    }
  }
}
// 拖动相关
.box {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  height: 100%;
  // border: 1px solid #ccc;
  margin: 0 auto;
}
.drag-item {
  width: 100px;
  height: 80%;
  // border: 1px solid #ccc;
  margin-bottom: 10px;
  margin-left: 20px;
  text-align: center;
  display: flex;
  flex-direction: column-reverse;
  // justify-content: center;
  align-items: center;
  .drag-name {
    margin-top: 10px;
    text-align: center;
  }
}
.drag-move {
  transition: transform 1s;
}
// -----
.typeone-main {
  width: 100%;
  height: calc(100% - 40px);
  margin-top: 20px;
  display: flex;
  position: relative;
  .typeone-left {
    width: 50%;
    height: 100%;
    margin-left: 20px;
    margin-right: 40px;
    // border: springgreen 1px solid;
    position: relative;
    .el-form {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  .typeone-right {
    width: 45%;
    padding-left: 30px;
    height: 100%;
    border-left: #406c7a 1px dashed;
    .el-form {
      width: 100%;
      display: flex;
      // flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      // .el-form-item{
      //    display: flex;
      //    .el-form-item__content {
      //      width: 100%;
      //    }
      //  .el-input{

      //  }
      // }
    }
    ::v-deep .el-form-item {
      width: 80%;
    }
    ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
      text-align: center;
    }
    ::v-deep .el-form-item__label {
      min-width: 70px;
    }
  }
}
.typetwo-main {
  width: 100%;
  height: 100%;
  margin-left: 2%;
  height: calc(100% - 40px);
  display: flex;
  position: relative;
}
</style>
